
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>9Bit </title>
    <meta name="keywords" value="江苏九比特" />
    <meta name="description" />
    <link href="css/body.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/web_js.js"></script>
            <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
            <script type="text/javascript">
                $(function () {
                    $('.map_i li').hover(function () {
                        $(this).css({ zIndex: '3' }).find('.map_des').show();
                    }, function () {
                        $(this).css({ zIndex: '2' }).find('.map_des').hide();
                    });
                });
            </script>   
<style>
    .foot {
        background-color: #f2f2f3;
    }
</style>
    <link rel="stylesheet" href="css/jquery.jscrollpane.css" type="text/css">
    <script src="js/jquery.jscrollpane.min.js" type="text/javascript"></script>
    <script src="js/jquery.mousewheel.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tezMkrfgyWwFrhm0HaqGW0w9"></script>
    <script src="js/RichMarker.min.js" type="text/javascript"></script> 
    <link rel="stylesheet" href="js/jquery.datetimepicker.css" type="text/css">
    <script src="js/jquery.datetimepicker.full.min.js" type="text/javascript"></script>
    <style>
        html, body {
            overflow-y:hidden
        }
        #about_content {
            overflow-x: hidden;
            height: 330px;
            width: 320px;
        }

            #about_content .jspVerticalBar {
                margin-left: 320px;
                background: none;
                width: 6px;
                right: 0;
                z-index: 99999;
            }

            #about_content .jspTrack {
                width: 6px;
                background: #fff;
            }

            #about_content .jspDrag {
                background: url(./images/brace.gif) left top no-repeat;
                width: 6px;
            }
        #l-map {
            height: 300px;
            width: 100%;
        }

        #r-result {
            width: 100%;
        }
        .xdsoft_datetimepicker.xdsoft_inline {
            border:0; margin-left:10px; margin-top:
        }
    </style>
    <script type="text/javascript" src="js/all.js"></script>	<!-- 下拉框 -->


	
</head>

<body>
    <div class="back_to_top"><a title="返回顶部" href="javascript:;"><i class="i"></i></a></div>

    <div class="container">

        <div class="container_page clearfix">
            <div class="head back_white">
                <div class="web_widht top clearfix">
                    <div class="logo left" ><a href="/"><img src="images/logo.png" style="height:80px;"/></a></div>
                    <div class="log_state right font16" id="login_status" style="display:block">
                        <a href="login" class="log">登录</a><a href="register" class="reg">注册</a>
                    </div>
                </div>
                <div class="nav font16">
                    <div class="clearfix web_widht">
                        <ul class="clearfix left">
                            <li  >
                                <a href="/">首 页</a></li@Html>
                            </li>
                            <li ><a href="login">个人中心</a></li>
                            <li class="on"><a href="/map">停车场搜索</a></li>
                            <li ><a href="/help">停车指南</a></li>
                            <li><a href="/feedback">投诉建议</a></li>
                            <li ><a href="/partner">加盟者</a></li>
                        </ul>
                        <div class="search_i  right relative">
                            <form action="/help/" method="post" onsubmit="return checksearch()">
                                <script>
                                    function checksearch() {
                                        if ($('#keywords').val().replace(/\s/ig, '') == '') {
                                            $('#keywords').focus();
                                            return false;
                                        }
                                        window.location.href = '/search/' + escape($('#keywords').val());
                                        return false;
                                    }
                                </script>
                                <input class="input_1 font14 radius_3" type="text" onblur="if(this.value=='') this.value='请输入关建字'" onclick="if(this.value=='请输入关建字') this.value=''" value="请输入关建字" name="keywords" id="keywords" />
                                <input class="but_1 absolute pointer" type="submit" name="button" id="button" value="" />
                            </form>
                        </div>
                    </div>
                </div>
            </div>
<div class="search_map absolute back_white radius_3 font16">

    <div id="socia_cont" class="left">
        <div class="select color_f">
            <i class="i"></i>
            <input class="val" name="lid" value="" type="hidden">
            <div class="show">深圳</div>
            <div style="display: none;" class="options">
                <div class="option">深圳</div>
                <div class="option">广州</div>
                <div class="option">上海</div>
                <div class="option">南京</div>
            </div>
        </div>
    </div>
    <div class="search_i left">
        <input class="input_1 font14 radius_3" type="text" onblur="if(this.value=='') this.value='请输入地名'" onclick="if(this.value=='请输入地名') this.value=''" value="请输入地名" name="map_keywords" id="map_keywords" />
        <input class="but_1 absolute pointer" type="submit" name="button" id="map_search_btn" value="" />
        <div id="searchResultPanel" style="border: 1px solid #C0C0C0; width: 300px; height: auto; display: none;"></div>
    </div>

</div>
<div id="maptips" class="maptips" style="position: absolute; left: 0; top: 0; z-index: 9999; background-color: rgb(247, 229, 8); color: #fff; top: 380px; padding: 0 30px; left: 50%; margin-left: -320px;">
    <div class="point" style="cursor: move;" id="foo">正在查找，请稍候...</div>
</div>
<div class="map_bd left" id="map"></div>
<div class="add_list back_white right color_9 lh_18" id="about_content">
    <ul id="parking_list">
    </ul>
</div>
<div id="maptip" class="map_tk back_white absolute font12 radius_3" style="left:30%; top:50%; display:none"></div>
<div id="mapres" class="map_tk back_white absolute font12 radius_3" style="left: 30%; top: 50%; margin-top:-160px; display: none; height:320px;"></div>





            
        <script>
            $('.map_bd,.add_list').height($(window).height() - 148);
            $('.map_bd').width($(window).width() - 320);
            $(window).resize(function () {
                $('.map_bd,.add_list').height($(window).height() - 148);
                $('.map_bd').width($(window).width() - 320);
            });
            var map;
            var getdata;
            var pointmarkder = [];

            $('#socia_cont .option').click(function () {
                var city = $(this).html();
                $('#socia_cont .show').html(city);
                map.centerAndZoom(city, 11);
                return false;
            }) 

            function G(id) {
                return document.getElementById(id);
            }

            function resizewindow() {
                if (!document.getElementById("map")) {
                    return;
                }
                map = new BMap.Map("map");
                var point = new BMap.Point(114.066112, 22.548515);
                map.centerAndZoom(point, 12);
                map.enableScrollWheelZoom();
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
                map.addControl(new BMap.MapTypeControl({
                    mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
                }));
                map.addEventListener("moveend", moveEndSearchResult);
                map.addEventListener("zoomend", moveEndSearchResult);
                setTimeout("moveEndSearchResult()", 500);
            }
            function moveEndSearchResult() {
                $("#maptips").show();
                closeTip();
                var bs = map.getBounds();
                var bssw = bs.getSouthWest();
                var bsne = bs.getNorthEast();
                var lngmin = bssw.lng;
                var latmin = bssw.lat;
                var lngmax = bsne.lng;
                var latmax = bsne.lat;
				
				//////******************* modify here for real data ********//////////////////////////////
				//demo json result
				getdata = {"success":1,"total":1,"pagesize":100,"pageno":1,"list":[{"id":1,"name":"华强北停车场22","region_name":"广东省,深圳市,罗湖区","address":"罗湖区","x":22.5492973,"y":114.093613,"pic":"","spaces":5000,"remainingspaces":4404,"timeout":30,"freetime":0,"distance":0,"reservation":1,"price":0.0,"feelist":[{"title":"免费","price":0,"unit":"分钟(计时)"},{"title":"过零点加收","price":10.00,"unit":"元"},{"title":"每日最高价","price":24.0,"unit":"元"}]}]};
				showSearchResult(1);
				//end of demo json result
				
                /*$.ajax({
                    type: "get",
                    url: "/map/?action=search&lngmin=" + lngmin + "&latmin=" + latmin + "&lngmax=" + lngmax + "&latmax=" + latmax + "&random=" + Math.random(),
                    dataType: "json",
                    success: function (data) {
                        $("#maptips").hide();
                        getdata = data;
                        showSearchResult(1);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $("#maptips").hide();
                        alert("此范围内没有找到符合要求的信息");
                    }
                }); */

            }
            function showSearchResult(page) {
                map.clearOverlays();
                $('#parking_list').html('');
                if (getdata.list.length > 0) {
                    getPoints(page);
                } else {
                    $('#parking_list').html('该范围内未搜索到停车场');
                }
            }
            function getPoints(page) {
                var page = parseInt(page);
                var json = getdata.list;
                var v_html = "";
                var length = json.length;
                var pageSize = 50;
                var maxPage = Math.ceil(length / pageSize);
                var page = page ? page : 1;
                var offSet = parseInt((page - 1) * pageSize);
                var leep = offSet + pageSize;
                if (leep > length) leep = length;
                for (var i = offSet; i < leep; i++) {
                    MapAddOverlay(json[i].y, json[i].x, i, json[i].name);
                    v_html += "<li p_id=" + i + ">";
                    v_html += '<h1 class="font18 color_3">' + json[i].name + '</h1>';
                    v_html += '<p>空余车位：<b class="green">' + json[i].remainingspaces + '</b></p>';
                    if (json[i].price > 0)
                        v_html += '<p>收费标准：约<b class="red">' + json[i].price + '元</b></p>';
                    if (json[i].remainingspaces > 0)
                        v_html += '<a href="#" class="res back_orange font18 radius_3 absolute reservation" pid="' + i + '"><i class="i"></i>预定</a>';
                    v_html += '</li>';
                }
                //setpage(page, maxPage);
                $("#parking_list").html(v_html);
                $("#parking_list li").hover(function () {
                    var p_id = $(this).attr('p_id');
                    $('#parking_rm_' + p_id).removeClass('map_p_btn').addClass('map_p_btn_on');
                    
                }, function () {
                    var p_id = $(this).attr('p_id');
                    $('#parking_rm_' + p_id).removeClass('map_p_btn_on').addClass('map_p_btn');
                })
            }
            function MapAddOverlay(lng, lat, eid, ename) {
                var latlng = new BMap.Point(lng, lat);
                pointmarkder[eid] = createMarker(latlng, ename, eid);
                map.addOverlay(pointmarkder[eid]);
            }
            function createMarker(point, LPname, id) {
                var c_html = '<div id="parking_rm_' + id + '" class="map_p_btn" title="' + LPname + '"></div>';
                var A = new BMapLib.RichMarker(c_html, point, {
                    "anchor": new BMap.Size(-25, -40),
                    "parking_id": "#parking_rm_" + id
                });
                A.addEventListener("mouseover",
                function () {
                    hoverMarker(A, true)
                });
                A.addEventListener("mouseout",
                function () {
                    hoverMarker(A, false)
                });
                A.addEventListener("click",
                function () {
                    hoverMarker(A, true);
                    opentipwindow(id, A.getPosition().lng, A.getPosition().lat);
                });
                return A;
            }
            function hoverMarker(B, A) {
                var D = BMap.Overlay.getZIndex(B.getPosition().lat);
                var parking_id = B._opts.parking_id;
                B = $(parking_id);
                if (A) {
                    B.css("z-index", "500");
                    B.removeClass();
                    B.addClass("map_p_btn_on");
                } else {
                    B.css("z-index", D);
                    lclass = "map_p_btn";
                    B.removeClass();
                    B.addClass(lclass);
                }
            }
            function resettip(pixel) {
                $('#maptip').show();
                var tw = $('#maptip').width();
                var th = $('#maptip').height();
                var mheight = $(window).height();
                pixel.y += $('.head').height();
                var tipleft = 0;
                var tiptop = 0;
                var tipsjt = 'tipsjt';
                console.log(pixel.x + '---' + pixel.y + '-----' + tw + '-=-====' + th);

                if (pixel.x < 350) {
                    tipleft = pixel.x + 30;
                } else {
                    tipleft = pixel.x - 360;
                    tipsjt = 'tipsjt_r';
                } 
                if (pixel.y < th) {
                    tiptop = pixel.y + 20;
                    tipsjt = 'tipsjt_t';
                    tipleft = pixel.x - 170;
                }
                else if (pixel.y + th > mheight) {
                    tiptop = pixel.y - th - 60;
                    tipsjt = 'tipsjt_b';
                    tipleft = pixel.x - 170;
                } else {
                    tiptop = pixel.y - 40;
                }
                console.log(tipleft + '-----' + tiptop);
                $('#maptip').css({ 'left': tipleft + 'px', 'top': tiptop + 'px', });
                $('#maptip #tipsjt').addClass(tipsjt);

            }
            function opentipwindow(id, lng, lat) {
                var thisjson = getdata.list[id];
                var v_html = '<div id="tipsjt"></div>';
                v_html += '    <h1 class="font14 green relative">' + thisjson.name + '<i class="i pointer" onclick="closeTip()"></i></h1>';
                v_html += '    <div class="p_10 tk_con">';
                v_html += '    	<p class="font14">空余车位：<b class="red">' + thisjson.remainingspaces + '</b> 个' + (thisjson.remainingspaces > 0 ? '<a href="#" class="but_b back_orange font18 radius_3 absolute reservation" style="right:10px;" pid="' + id + '"><i class="i"></i>预定</a>' : '') + '</p>';
                v_html += '       <p class="green font14">收费标准：</p> ';
                v_html += '        <div class="color_9">';
                for (var i = 0; i < thisjson.feelist.length; i++)
                {
                    v_html += '          <li>' + thisjson.feelist[i].title + thisjson.feelist[i].price + thisjson.feelist[i].unit + '</li>';

                } 
                v_html += '        </div>';
                if (thisjson.pic != '') {
                    var img = thisjson.pic.split(',');
                    v_html += '        <div id="slideBox" class="tc_slideBox relative">';
                    v_html += '        <div class="hd">';
                    v_html += '            <ul>';
                    for (var i = 0; i < img.length; i++) {
                        v_html += '<li>' + (i + 1) + '</li>';
                    }
                    v_html += '            </ul>';
                    v_html += '        </div>';
                    v_html += '        <div class="tc_img">';
                    v_html += '            <ul>';
                    for (var i = 0; i < img.length; i++) {
                        v_html += '<li><img src="' + img[i] + '" /></li>';
                    }
                    v_html += '            </ul>';
                    v_html += '        </div>';
                }
                v_html += '        <!-- 下面是前/后按钮代码，如果不需要删除即可 -->';
                v_html += '        <a class="prev" href="javascript:void(0)"></a>';
                v_html += '        <a class="next" href="javascript:void(0)"></a>';
                v_html += '        </div>';
                v_html += '    </div>';
                var node = document.getElementById('maptip');
                node.innerHTML = v_html;

                var point = new BMap.Point(lng, lat);
                var pixel = map.pointToPixel(point);
                resettip(pixel);

                jQuery(".tc_slideBox").slide({ mainCell: ".tc_img ul", autoPlay: true, effect: "left", delayTime: 1000, mouseOverStop: false });
            }
            function closeTip() {
                $('#maptip').hide();
            }
            
            resizewindow();

            var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {
                "input": "map_keywords", "location": map
            });

            ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
                var str = "";
                var _value = e.fromitem.value;
                var value = "";
                if (e.fromitem.index > -1) {
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                value = "";
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                G("searchResultPanel").innerHTML = str;
            });

            var myValue;
            ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                setPlace();
            });

            function setPlace() {
                map.clearOverlays();    //清除地图上所有覆盖物
                function myFun() {
                    var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                    map.centerAndZoom(pp, 15);
                    map.addOverlay(new BMap.Marker(pp));    //添加标注
                }
                var local = new BMap.LocalSearch(map, { //智能搜索
                    onSearchComplete: myFun
                });
                local.search(myValue);
            }
            $('#map_search_btn').click(function () {
                var key_value = $('#map_keywords').val();
                if (key_value == '请输入地名' || key_value == '') {
                    $('#map_keywords').focus();
                    return false;
                }
                // 创建地址解析器实例
                var myGeo = new BMap.Geocoder();
                // 将地址解析结果显示在地图上,并调整地图视野
                myGeo.getPoint(key_value, function (point) {
                    if (point) {
                        map.centerAndZoom(point, 15);
                        map.addOverlay(new BMap.Marker(point));
                    } else {
                        alert("您选择地址没有解析到结果!");
                    }
                }, $('#socia_cont .show').html());
            })



            $(function () {
                var jscroll = $('#about_content');
                jscroll.jScrollPane({
                    verticalDragMinHeight: 35,
                    verticalDragMaxHeight: 35,
                    autoReinitialise: true
                });
            });
            function closeresTip() {
                $('#mapres').hide();
                return false; 
            }
            $('#parking_list,#maptip').on('click', '.reservation', function () {
                if (window.islogin != true) {
                    alert('请先登录');
                    window.location.href = 'http://member.168parking.com/login?backurl='+escape('http://www.168parking.com/map/');
                }
                var pid = $(this).attr('pid');
                $('#mapres').html('<h1 class="font14 green relative">预定：' + getdata.list[pid].name + '<i class="i pointer" onclick="closeresTip()"></i></h1><div id="res_date_pick"><input id="res_datetime" type="text" value="2015-11-30 20:12" /><div style="text-align: center; display: block; padding-top:10px;"><a href="#" class="but_b back_orange font18 radius_3 reservation_sub">预定</a></div></div>');
                $('#mapres').show();
                jQuery('#res_datetime').datetimepicker({
                    format: 'Y.m.d H:i',
                    inline: true,
                    lang: 'ru',
                    minDate: '2015.11.30 20:12',
                    startDate: '2015.11.30 20:12'
                });
                $('.reservation_sub').click(function () {
                    $.ajax({
                        type: "POST",
                        url: "/map/reservation",
                        data: { 'parking_id': getdata.list[pid].id, 'date': $('#res_datetime').val() },
                        dataType: "json",
                        success: function (data) {
                            if (data.success == 1) {
                                alert('预定成功');
                                $('#res_date_pick').html('预定成功，到<a href="http://member.168parking.com/user/#reservation" class="green">个人中心</a>查看!').css({ 'text-align': 'center', 'line-height': '220px', 'font-size': '18px' });
                            }
                            else {
                                alert(data.msg);
                            }
                        }
                    });

                })
            })
        </script>
    
        </div>
    </div>

        <div class="foot back_white">
            <div class="web_widht">
                <div class="ewm left"><img src="images/ewm.gif" /></div>
                <div class="foot2 left color_9">
                    <p class="color_c"><a href="/about/">关于我们</a>&nbsp;&nbsp;｜&nbsp;&nbsp;<a href="/about/10">联系我们</a>&nbsp;&nbsp;｜&nbsp;&nbsp;<a href="/news/">新闻中心</a>&nbsp;&nbsp;｜&nbsp;&nbsp;<a href="/ann/">网站公告</a></p>
                    <p>Copyright © 2015  版权所有 </a></p>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
		<script type="text/javascript">
			jQuery(".slideBox").slide({ mainCell: ".banner ul", autoPlay: true, effect: "left", delayTime: 1000, mouseOverStop: false });
			jQuery(".txtScroll-left").slide({ titCell: ".hd ul", mainCell: ".bd ul", autoPage: true, effect: "left", delayTime: 700, pnLoop: false, trigger: "click", mouseOverStop: false });
		</script>
        </div>
    </div>
</body>
</html>